<template>
  <div>
    <a-modal :title="'用户信息'" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel1">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="openid">
          <a-input v-model="form.openid" />
        </a-form-model-item>
        <a-form-model-item label="手机号">
          <a-input v-model="form.phone" />
        </a-form-model-item>
        <a-form-model-item label="来源">
          <a-input v-model="form.mp" />
        </a-form-model-item>
        <!-- <a-form-model-item label="头像">
          <a-upload :action="$baseUrl + '/index/upload/upload'" list-type="picture-card" :file-list="fileList"
            @preview="imgPre" @change="imgChange">
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="imgCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-form-model-item> -->
        <!-- <a-form-model-item label="用户类型">
          <a-radio-group :options="typeOptions" :default-value="form.type" @change="userTypeChange" />
        </a-form-model-item> -->
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
import { addUser } from "../../http/api";
export default {
  name: "userEdit",
  data() {
    return {
      visible: this.flag,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      typeOptions: [],
      form: {
        id: '',
        openid: '',
        shopId: '',
        phone: '',
        mp: ''
      },
      previewVisible: false,
      previewImage: '',
      fileList: [],

      editType: 1, //1是新增 2是编辑
    };
  },
  props: ["flag", "list"],
  created() {
    if (this.list.length != 0) {
      this.form = {
        id: this.list.id,
        openid: this.list.openid,
        shopId: this.list.shopId,
        phone: this.list.phone,
        mp: this.list.mp
      }
      // this.fileList = [{
      //   uid: -1,
      //   name: 'image.png',
      //   status: 'done',
      //   url: 'http://' + this.list.img,
      // }]
      this.editType = 2
    } else {
      this.editType = 1
    }
  },
  methods: {
    userTypeChange(e) {
      // console.log(e.target.value)
      this.form.type = e.target.value
    },
    //商品图片
    imgCancel() {
      this.previewVisible = false;
    },
    async imgPre(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    imgChange({ fileList }) {
      // console.log(fileList)
      this.fileList = fileList;
      var arr = []
      fileList.map(item => {
        if (item.response) {
          arr.push(item.response.data)
        }
        if (item.url) {
          arr.push(item.url.replace('http://', ''))
        }
      })
      this.form.imgs = arr
    },
    //确认
    handleOk(e) {
      this.confirmLoading = true;
      // console.log(this.form)
      if (this.editType == 2) {

      } else {
        this.addUser(this.form.openid, this.form.phone, this.$store.state.user.shopId, this.form.mp);
      }
    },
    //点击取消 关闭弹框赋值
    handleCancel1(e) {
      console.log("Clicked cancel button");
      this.visible = false;
      this.$emit("func", this.visible);
    },
    //点击确定 关闭弹框赋值
    closefz() {
      this.visible = false;
      this.confirmLoading = false;
      this.$emit("func", this.visible);
    },
    async addUser(openid, phone, shopId, mp) {
      var res = await addUser({ openid, phone, shopId, mp });
      console.log('新增用户', res.result);
      if (res.result.code == 200) {
        this.$tishi("success", res.result.msg);
        this.closefz()
      } else {
        this.$tishi("warning", res.result.msg);
        this.confirmLoading = false;
      }
    },
  },
};
</script>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
